<script setup>
import { maskPhoneNumber } from '@/utils/index.js'
import { useRouter } from 'vue-router'
import Header from '@/components/header/Header.vue'
import { userStore } from '@/stores/user.js'
import {getToken, logout} from "@/utils/user.js"
import {showConfirmDialog} from "vant";
import api from "@/api/index.js";

const user = userStore()
const router = useRouter()

const goRouterClick = (path) => {
  router.push({path})
}

const logoutClick = () => {
  if (getToken()) {
    showConfirmDialog({
      message: '确定退出登录？',
    }).then(() => {
      logout()
    }).catch(() => {})
  } else {
    router.push('/login')
  }
}

function  initUserInfo(){
  if(getToken() && !user.userInfo){
    api.getUserinfo().then((res) => {
      sessionStorage.setItem('userInfo', JSON.stringify(res.data));
      user.setUserInfo(res.data);
    });
  }
}

initUserInfo()

</script>

<template>
  <div class="setting">
    <Header title="设置" :back="true"/>
    <div class="content">
      <div class="card">
        <div v-if="user?.userInfo?.memberName" class="list" @click="goRouterClick('')">
          <div class="key">
            更换手机号
          </div>
          <div class="value">
            <span class="phone">{{ maskPhoneNumber(user?.userInfo?.memberName) }}</span>
            <van-icon name="arrow" color="#999999" />
          </div>
        </div>
<!--        <div class="list" @click="goRouterClick('/settinginterface/components/changepassword')">-->
<!--          <div class="key">-->
<!--            修改密码-->
<!--          </div>-->
<!--          <van-icon name="arrow" color="#999999" />-->
<!--        </div>-->
      </div>
      <div class="card-1" @click.stop="logoutClick">
        {{getToken() ? '退出登录' : '去登录'}}
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.setting{
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  height: 100vh;
  .content{
    flex: 1;
    background-color: #F9F8F3;
    .card {
      margin: 1.5rem;
      background: #FFFFFC;
      border-radius: 1rem;
      .list {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1.5rem;
        .key{
          font-size: 1.5rem;
          color: #666666;
          font-weight: 600;
        }
        .value{
          display: flex;
          align-items: center;
          .phone{
            margin-right: 1rem;
            font-size: 1.5rem;
            color: #333333;
            font-weight: bold;
          }
        }
      }
    }
    .card-1{
      display: flex;
      align-items: center;
      justify-content: center;
      height: 5.1rem;
      color: #ED6316;
      font-size: 1.5rem;
      font-weight: 600;
      border-radius: .5rem;
      background: #FFFFFC;
      margin: 0 1.5rem;
    }
  }
}

.back {
    width: 100%;
    height: 100%;
    background: #F9F8F3;
}

</style>
